<template>
  <div class="container">
    <div class="left-side">
      <HighAgree :blogs="highAgreeBlogs" />
    </div>
    <div class="right-side">
      <BlogList :blogs="blogs" :loading="loading" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import HighAgree from "@/components/HighAgree.vue";
import BlogList from "@/components/BlogList.vue";
import { searchBlogs } from "@/api/search";
import { getHighAgreeBlogs } from "@/api/blog";
import { ElMessage } from "element-plus";
import { useBlogStore } from "@/stores/blog";

const blogs = ref([]);
const highAgreeBlogs = ref([]);
const loading = ref(false);
const BlogStore = useBlogStore();

const fetchData = async () => {
  loading.value = true;
  try {
    console.log("----0-----");
    const [highAgreeBlogsRes] = await Promise.all([
      // BlogStore.getBlogs("", "blog", 1, 10),
      getHighAgreeBlogs(10)
    ]);

    console.log("高赞博客数据:", highAgreeBlogsRes);

    if (highAgreeBlogsRes.code === "200" && highAgreeBlogsRes.data) {
      highAgreeBlogs.value = highAgreeBlogsRes.data;
    } else {
      console.error("高赞博客数据格式错误:", highAgreeBlogsRes);
    }

    /* if (blogsRes.code === "200" && blogsRes.data.list) {
      console.log("博客列表数据:", JSON.stringify(blogsRes.data.list));
      blogs.value = blogsRes.data.list;
    } else {
      console.error("博客列表数据格式错误:", blogsRes);
    } */
  } catch (error) {
    console.error("获取博客列表失败:", error);
    ElMessage.error("获取博客列表失败");
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  fetchData();
});
</script>

<style scoped>
.container {
  display: flex;
  gap: 20px;
}

.left-side {
  width: 300px;
  flex-shrink: 0;
}

.right-side {
  flex: 1;
  min-width: 0; /* 防止内容溢出 */
}
</style>
